<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      background-color="#ffffff"
      text-color="#6F6351"
      active-text-color="#000000"
      router
     >
     <template v-for="item in items">
      <template >
        <el-menu-item :index="item.index" :key="item.index" class="item">
          <span v-if="item.mode === 'menu'" class="menu-item-menu" >{{ item.title }}</span>
          <span v-else-if="item.mode === 'router'" class="menu-item-router" >{{ item.title }}</span>
        </el-menu-item> 
      </template>
    </template>

    </el-menu>
    
  </div>
</template>

<script>

export default {
    data(){
        return{
            collapse: false,
            items:[
              {
                mode:'router',
                 index:'myLike',
                 title:'发现音乐'
              },
              {
                mode:'router',
                 index:'video',
                 title:'视频'
              },
              {
                mode:'router',
                 index:'FM',
                 title:'私人FM'
              }
              ,
              {
                mode:'menu',
                title:'我的音乐'
              }
              ,
              {
                mode:'router',
                 index:'day',
                 title:'每日推荐'
              }
              ,
              {
                mode:'router',
                 index:'recentPlayed',
                 title:'最近播放'
              }
              ,
              {
                mode:'router',
                 index:'collection',
                 title:'我的收藏'
              }
              
            ]
        }
    },
    computed:{
      onRoutes(){
        return this.$route.path.replace('/','');
      }
    },
}
</script>

<style scoped>
.item{
  user-select: none; 
  width: 200px;
}

.menu-item-menu{
  float: left;
  font-size: 14px;
}
.menu-item-router {
  font-size: 17px;
  float: left;
  
}
.el-menu-item.is-active {
      font-size: 18px;
      font-weight: bold; 
}
.sidebar{
    /* 块状 */
    display: block;
    /* 绝对定位 */
    position: absolute;
    top: 80px;
    bottom: 0;
    background-color:#ffffff ;
    /* 超越y轴的变成滚轮 */
    overflow-y: hidden;
}

.sidebar:hover{

overflow-y:auto

}
.sidebar::-webkit-scrollbar{
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
      border-radius:5px;
      -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
      background-color:#BEC3CA;
}

.sidebar::-webkit-scrollbar-track {
    border-radius: 20px;
    background: #ffffff;
}
.sidebar-el-menu{
  width: 200px;
}
/* 循环高度100% */
.sidebar >ul{
  height: 100%;
}

</style>